<template>
	<div class="cbox" style="height: 100vh; overflow: hidden;">
		<div style="display: flex; height:100vh;">
			<div style="display: flex; height:100%;overflow: auto; width: 30%; border-right: 1px solid #ccc; ">
				<div style="padding:0 20px">
					<div class="header" style="background-color: greenyellow;">【基准库】表</div>
					<div :class="['tableitem', table.differ ? 'differ' : '', table.name == ckdTable ? 'ckd' : '']"
						@click="checkTable(idx)" v-for="(table, idx) in Data.tablePro" :key="idx">{{ table.name
						}}
					</div>

					<div style="height:10px"></div>
				</div>
				<div style="padding:0 20px">
					<div class="header" style="background-color: orange;">【修改库】表</div>
					<div :class="['tableitem', table.differ ? 'differ' : '', table.name == ckdTable ? 'ckd' : '']"
						@click="checkTable(idx)" v-for="(table, idx) in Data.tableDev" :key="idx">{{ table.name
						}}
					</div>
					<div style="height:10px"></div>
				</div>
			</div>

			<div style="display: flex; height:100%;overflow: auto;  width: 30%;border-right: 1px solid #ccc; ">

				<div style="padding: 10px;">
					<div class="header" style="background-color: greenyellow;">【基准库】【{{ Data.ckdTable }}】</div>

					<div v-if="Data.ckdTable">

						<div :title="JSON.stringify(col)" :class="['tableitem', col.differ ? 'differ' : '']"
							v-for="(col, i) in Data.coloumsPro.columns" :key="i">
							【{{ col.Field }}】【{{ col.Type }}】


						</div>
					</div>

				</div>
				<div style="padding: 10px;">
					<div class="header" style="background-color: orange;">【修改库】【{{ Data.ckdTable }}】</div>


					<div v-if="Data.ckdTable">
						<div :title="JSON.stringify(col)" :class="['tableitem', col.differ ? 'differ' : '']"
							v-for="(col, i) in Data.coloumsDev.columns" :key="i">
							【{{ col.Field }}】【{{ col.Type }}】
						</div>
					</div>

				</div>
			</div>
			<div style="width: 0; flex-grow: 1;">
				<textarea v-model="Data.sqlStr" style="width: 100%; height: 100%;"></textarea>
				
			</div>

		</div>

	</div>
</template>


<script setup>

import {
	onMounted,
	reactive
} from "vue";
import $http from "@/api/request"
const Data = reactive({
	tablePro: [],
	tableDev: [],
	ckdTable: "",
	coloumsPro: {},
	coloumsDev: {},
	sqlStr:""
})
const table = reactive({ name: "" })
onMounted(async e => {
	getList()
})

const getList = () => {
	$http.post("/api/dbcheck_gettables").then(res => {

		let tablePro = res.data.tablePro
		let tableDev = res.data.tableDev


		let alignedPro = []
		let alignedDev = []
		let commonTables = {}


		// First add matching pairs
		tablePro.forEach(proItem => {
			const devItem = tableDev.find(e => e.name === proItem.name)
			if (devItem) {
				commonTables[devItem.name] = devItem
			}
		})

		for (const key in commonTables) {
			for (let item of tablePro) {
				if (item.name == key) {
					alignedPro.push(item)
					break
				}
			}

			for (let item of tableDev) {
				if (item.name == key) {
					alignedDev.push(item)
					break
				}
			}


		}

		for (let table of tablePro) {
			if (!commonTables[table.name]) {
				alignedPro.push(table)
				alignedDev.push({ name: "-", columns: [], differ: true })
			}
		}
		for (let table of tableDev) {
			if (!commonTables[table.name]) {
				alignedDev.push(table)
				alignedPro.push({ name: "-", columns: [], differ: true })
			}
		}

		//检查表是否一致
		for (let i = 0; i < alignedPro.length; i++) {
			if (alignedPro[i].name != alignedDev[i].name) {
				alignedPro[i].differ = true
				alignedDev[i].differ = true
			} else {
				//检查列是否一致
				if (alignedPro[i].columns.length != alignedDev[i].columns.length) {
					alignedPro[i].differ = true
					alignedDev[i].differ = true
				} else {
					for (let j = 0; j < alignedPro[i].columns.length; j++) {
						if (alignedPro[i].columns[j].Field != alignedDev[i].columns[j].Field) {
							alignedPro[i].differ = true
							alignedDev[i].differ = true
						} else if (alignedPro[i].columns[j].Type != alignedDev[i].columns[j].Type) {
							alignedPro[i].differ = true
							alignedDev[i].differ = true
						} else if (alignedPro[i].columns[j].Type != alignedDev[i].columns[j].Type
							|| alignedPro[i].columns[j].Null != alignedDev[i].columns[j].Null
							|| alignedPro[i].columns[j].Key != alignedDev[i].columns[j].Key
							|| alignedPro[i].columns[j].Default != alignedDev[i].columns[j].Default
							|| alignedPro[i].columns[j].Extra != alignedDev[i].columns[j].Extra) {
							alignedPro[i].differ = true
							alignedDev[i].differ = true
						}
					}
				}

			}
		}

		Data.tablePro = alignedPro
		Data.tableDev = alignedDev





		// Data.tablePro = res.data.tablePro
		// Data.tableDev = res.data.tableDev


	})
}
const checkTable = (idx) => {
	let name = Data.tablePro[idx].name
	if(name=="-"){
		name = Data.tableDev[idx].name
	}
	Data.ckdTable = name

	let coloumsPro = {name:"",columns:[]}, coloumsDev = {name:"",columns:[]}
	for (let item of Data.tablePro) {
		if (item.name == name) {
			coloumsPro =  {...item}
			break
		}
	}
	for (let item of Data.tableDev) {
		if (item.name == name) {
			coloumsDev = {...item}
			break
		}
	}

	//检查列是否一致

	let commonCols = {}
	let _coloumsPro = [], _coloumsDev = []
	for (let proItem of coloumsPro.columns) {
		const devItem = coloumsDev.columns.find(e => e.Field === proItem.Field)
		if (devItem) {
			commonCols[devItem.Field] = {...devItem}
		}
	}
	for (const key in commonCols) {
		for (let item of coloumsPro.columns) {
			if (item.Field == key) {
				_coloumsPro.push({...item})
				break
			}
		}

		for (let item of coloumsDev.columns) {
			if (item.Field == key) {
				_coloumsDev.push({...item})
				break
			}
		}
	}

	for (let col of coloumsPro.columns) {
		if (!commonCols[col.Field]) {
			_coloumsPro.push(col)
			_coloumsDev.push({ Field: "-", differ: true })
		}
	}
	for (let col of coloumsDev.columns) {
		if (!commonCols[col.Field]) {
			_coloumsDev.push(col)
			_coloumsPro.push({ Field: "-", differ: true })
		}
	}




	for (let i = 0; i < _coloumsPro.length; i++) {
		_coloumsPro[i].differ = false
		_coloumsDev[i].differ = false
		if (_coloumsPro[i].Field != _coloumsDev[i].Field || _coloumsPro[i].Type != _coloumsDev[i].Type || _coloumsPro[i].Default != _coloumsDev[i].Default
			|| _coloumsPro[i].Null != _coloumsDev[i].Null || _coloumsPro[i].Key != _coloumsDev[i].Key
		) {
			_coloumsPro[i].differ = true
			_coloumsDev[i].differ = true
		}
	}



	coloumsPro.columns = _coloumsPro
	coloumsDev.columns = _coloumsDev

	Data.coloumsPro = coloumsPro
	Data.coloumsDev = coloumsDev
	Data.sqlStr=''
	let colCount =0;
	for(let col of Data.coloumsDev.columns){
		console.log(col.Field);
		if(col.Field!="-"){
			colCount++
		}
	}

	console.log(colCount);
	

	if(colCount==0){
		Data.sqlStr=`create table ${Data.ckdTable} (\n`
		for(let col of Data.coloumsPro.columns){
			Data.sqlStr +="\t" +  col.Field +" " + col.Type + " " + (col.Null =='NO'?'not null ':'null') + " " + (col.Key=="PRI"?'PRIMARY KEY':'') 
			+ " " + (col.Default?"default "+col.Default:"") + " " + (col.Extra?col.Extra:'') + ",\n" 
		}
		Data.sqlStr = Data.sqlStr.substring(0, Data.sqlStr.length - 2) + "\n)"
		Data.sqlStr += ";"
	}else{
		Data.sqlStr=`alter table ${Data.ckdTable} \n`
		for(let i=0;i<Data.coloumsPro.columns.length;i++){
			console.log(Data.coloumsDev.columns[i].Field);
			let col = Data.coloumsPro.columns[i]
			if(Data.coloumsDev.columns[i].Field=="-"){
				Data.sqlStr += "\t ADD COLUMN " + Data.coloumsPro.columns[i].Field  +" "+ col.Type + " " + (col.Null =='NO'?'not null ':'null') + " " + (col.Key=="PRI"?'PRIMARY KEY':'') 
				+ " " + (col.Default?"default "+col.Default:"") + " " + (col.Extra?col.Extra:'') + ",\n" 
			}else if(Data.coloumsDev.columns[i].Field!="-"&& Data.coloumsPro.columns[i].Field=="-"){//删除列
				Data.sqlStr += "\t DROP COLUMN " + Data.coloumsDev.columns[i].Field + ",\n"
			}else  if(Data.coloumsDev.columns[i].differ || Data.coloumsPro.columns[i].differ){
				Data.sqlStr += "\t MODIFY COLUMN " + Data.coloumsPro.columns[i].Field  +" "+ col.Type + " " + (col.Null =='NO'?'not null ':'null') + " " + (col.Key=="PRI"?'PRIMARY KEY':'') 
				+ " " + (col.Default?"default "+col.Default:"") + " " + (col.Extra?col.Extra:'') + ",\n"
			}
		}

		Data.sqlStr = Data.sqlStr.substring(0, Data.sqlStr.length - 2) + "\n"
		Data.sqlStr += ";"


	}

	


}
</script>

<style>
.tableitem {
	border-bottom: 1px solid #ccc;
	cursor: pointer;
}

.differ {
	background-color: red;
	color: aliceblue;
}
</style>